<template>
  <div class="money">
    <Tabs :text="text">
    <!-- 搜索-->
    <Search @data ="upState" @easySearch="searchData"/>
    </Tabs>
    <HighSearch v-if="searchState" :position="position"></HighSearch>
    <router-view></router-view>
  </div>
</template> 

<script>
import Tabs from "../components/Tabs.vue"
import Search from "../components/Search.vue";
import HighSearch from "../components/HighSearch.vue";
import { mapState, mapMutations, mapActions } from "vuex"

export default {
  name: "Money",
  components: {
    Tabs,
    Search,
    HighSearch,
  },
  computed: {
    ...mapState("moneyStore", ["searchState"]),
  },
  data() {
    return {
      text: [
        {
          id: "1",
          textName: "收支列表",
          url: "/money/incomelist"
        },
        {
          id: "2",
          textName: "今日收支",
          url: "/money/todayincome"
        },
        {
          id: "3",
          textName: "本周收支",
          url: "/money/weekincome"
        },
        {
          id: "4",
          textName: "本月收支",
          url: "/money/monthincome"
        },
        {
          id: "5",
          textName: "数据导出",
          url: "/money/exportincomedata"
        },
        {
          id: "6",
          textName: "新增收入",
          url: "/money/addincomedata"
        },
        {
          id: "7",
          textName: "新增支出",
          url: "/money/addexpenddata"
        }
      ],
      // state: false,  
      currentPage: 1, //当前页
      pageSize: 3, //页数
    }
  },
  methods: {
    ...mapMutations("moneyStore", ["setsearchState"]),
    ...mapActions("moneyStore", ["getSearchData"]),
    clickItem(id) {
      console.log("当前点击：", id);
    },
    upState(data){
      // this.state = !data//状态处理
      console.log("data", data);
      this.setsearchState()
    },
    searchData(val) {
      let obj = {
        currentLimit: this.pageSize,
        currentPage: this.currentPage,
        search: val,
      };
      this.getSearchData(obj)
      .then(res => {
        console.log("查询成功：", res);
      })
      .catch(err => {
        console.log("查询失败：", err);
      })
    },
  }
}
</script>

<style>

</style>